<template>
  <div id="activitiesDetails">
    <div class="container">
      <div class="pic_box">
        <img class="main_pic" v-src="messageData.recommendPagePic">
      </div>
      <div class="textBox padding25">
        <h1 class="hui_name">优惠券#  {{messageData.title}} <span class="hui_desc">{{messageData.subtitle}}</span></h1>

        <div v-show="false" class="countBox flex-row">
          <span class="flex-grow-1">天猫</span>
          <p class="flex-grow-1">
            <span>2069人浏览</span>
            <span>|</span>
            <span>12-01 15:32</span>
          </p>
        </div>
      </div>
      <div class="tuijian_area padding25">
        <h1>推荐理由</h1>
        <p>
          <a href="javascript:void(0);">{{messageData.title}}</a>
          {{messageData.recommendedReason}}
        </p>
        <p v-show="false" class="lingqu">
          <a href="javascript:void(0)">
            点我领取满400-200元店铺券
          </a>
        </p>
        <p class="lingqu"></p>
      </div>
      <div class="goods_tuijian padding25">
        <h1 class="title">好价单品推荐:</h1>
        <div @click="toTaobao(item.goodId)" v-for="(item,index) in listData" class="tuijian_item vux-1px flex-row" >
          <div class="img_box flex-grow-0">
            <img v-lazy="item.mainPic" alt="">
          </div>
          <div class="text_box flex-grow-1 flex-col">
            <p class="name twoLine">{{item.name}}</p>
            <p class="name_desc">
              <span v-show="false">满400-200元店铺券</span>

            </p>
            <div class="priceBox flex-row">
              <div class="flex-grow-1">抢{{item.couponValue | getCount}}元券</div>
              <div class="price flex-grow-1">￥{{item.priceAfterCoupon | getCount}}券后价</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-show="false" class="fixed_bottom flex-row">
      <div class="leftText flex-grow-1 flex-y-center">
        <div class="flex-grow-1 flex-x-center">收藏</div>
        <div class="flex-grow-1 flex-x-center">评论</div>
      </div>
      <div class="rightBuyBtn flex-grow-0 flex-x-center flex-y-center">
        前往购买
      </div>
    </div>
  </div>
</template>
<script>
  import HeaderBar from 'src/components/common/headerBar';
  import MDUtils from 'src/assets/js/md-utils'
  import {RUI_GETYOUHUIDETAILS} from 'src/const/uri'
  export default{
    data(){
      return{
        title:'优惠详情',
        messageData:[],
        listData:[],
        reqPage:1,
        reqPageSize:10,
      }
    },
    components:{
      HeaderBar
    },
    created(){
      this.initData();
    },
    methods:{
      initData(){
        this.$ajax.get(RUI_GETYOUHUIDETAILS,{
          reqPage:this.reqPage,
          reqPageSize:this.reqPageSize,
          recommendId:MDUtils.getQueryParam('id'),
          promotionTypeId:MDUtils.is_ios()?2:3
        },(res)=>{
          console.log(res);
          // console.log(res);
          this.messageData=res.data.otherData.recommend;
          this.listData=res.data.data;
          console.log(this.listData);
          console.log(this.messageData);
        });
      },
      refreshData(responseCallback) {
        this.initData();
        responseCallback({code: '0'});
      },
      toTaobao(id){
        console.log(id);
        if (window.WebViewJavascriptBridge) {
          window.WebViewJavascriptBridge.callHandler('toDetail', id);
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "AppActivitiesDetails";
</style>
